<app-okr-toolbar [isCycleManagementOptionVisible]="true">

  <button mat-icon-button class="toolbar-margin-icon" matTooltip="{{'main-view.tooltip.toogle-navigvation' | translate}}" (click)="toggleSideBar()">
    <mat-icon>menu</mat-icon>
  </button>

  <button mat-icon-button class="toolbar-margin-icon" matTooltip="{{'main-view.tooltip.go-to-structure-view' | translate}}" [routerLink]="['../companies']">
    <mat-icon>home</mat-icon>
  </button>

  <app-cycle-list-dropdown *ngIf="!mobileQuery.matches" matTooltip="{{'main-view.tooltip.adjust-cycleperiod' | translate}}" matTooltipPosition="after" class="max-width-230"></app-cycle-list-dropdown>

</app-okr-toolbar>

<app-navigation-sidebar #sideBar>

  <div *ngIf="currentCycle$ | async as cycle">
    <mat-card *ngIf="!cycle.isCycleActive()" [ngClass]="cycle.isCycleInPreparation()?'cycle-hint-preparation':'cycle-hint-closed'">
      <div class="flex-nowrap">
        <mat-icon class="icon-spacer-large">info</mat-icon>
        <div *ngIf="cycle.isCycleInPreparation()">{{'main-view.navigation-sidebar.cycle-not-started' | translate}}</div>
        <div *ngIf="cycle.isCycleClosed()">{{'main-view.navigation-sidebar.cycle-started' | translate}}</div>
      </div>
    </mat-card>
  </div>

  <router-outlet></router-outlet>
</app-navigation-sidebar>
